<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTables AJAX Example</title>
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
</head>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
<th>Salary</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
<th>Salary</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function() {
new DataTable('#example', {
ajax: 'hub_wa0356_maintain_get.php',
"pageLength": 10,
"processing": true,
"serverSide": true,
columns: [
{ data: 'counter' },
{ data: 'ACTIV' },
{ data: 'CMPNO' },
{ data: 'LILIN' },
{ data: 'WZART' },
{ data: 'WZQUA' },
{ data: 'WZDSC' },
{ data: 'WZBLD' }
]
});
// $('#example').DataTable({
// "processing": true,
// "dataType" : "json",
// "serverSide": true,
// "ajax": {
// "url": "hub_wa0356_maintain_get.php",
// "type": "POST"
// },
// "pageLength": 10,
// "createdRow": function (row, data, rowIndex) {
// alert(row);
// alert(data);
// },
// "columns": [
// { "detail": "counter" },
// { "detail": "ACTIV" },
// { "detail": "CMPNO" },
// { "detail": "LILIN" },
// { "detail": "WZART" },
// { "detail": "WZQUA" },
// { "detail": "WZDSC" },
// { "detail": "WZBLD" }
// // Add more columns if needed
// ]
// });
});
</script>
</body>
</html>